<template>
  <div class="bookshelf">
    <!-- 册子（pc显示） -->
    <div class="boxList" v-if="pc">
      <Book
        :index="booklist.id"
        :current="bookCurrent"
        v-for="(booklist, index) in booksList"
        :key="index"
        @click.native="handclick(index)"
        :img="booklist.url"
      ></Book>
    </div>
    
     <!-- 书架格子图片 -->
    <div class="shujia01" v-if="pc">
      <img src="@/assets/img/shujia01.png" alt="" />
    </div>

    <!-- 族谱 -->
    <div class="swiperBox">
      <div v-for="(books, index) in zupuList" :key="index">
        <Swiper :imgList="books.bookshelfF"></Swiper>
         <!-- 书架格子图片 -->
        <div class="shujia01">
          <img src="@/assets/img/shujia01.png" alt="" />
        </div>
      </div>
      <div style="clear:both"></div>
    </div>

    <!-- 册子（移动端显示） -->
    <div class="boxList mobile" v-if="pc == false">
      <Book
        :index="booklist.id"
        :current="bookCurrent"
        v-for="(booklist, index) in booksList"
        :key="index"
        @click.native="handclick(index)"
        :img="booklist.url"
      ></Book>
    </div>

    <!-- 书架格子图片 -->
    <div class="shujiaMobile" v-if="pc == false">
      <img src="@/assets/img/shujia01.png" alt="" />
    </div>

    <!-- 书架背景图 -->
    <img src="https://sdcuihe.com/zupuImg/bj.png" style="display:block;width:100%;height:100%;position:fixed;left:0;top:0;" alt="">
    <div style="clear:both"></div>
  </div>
</template>

<script>
import Swiper from '@/components/swiper.vue'
import Book from '@/components/book.vue'
export default {
  beforeCreate: function() {
    document.getElementsByTagName('body')[0].className = 'bg'
  },
  beforeDestroy: function() {
    document.body.removeAttribute('class', 'bg')
  },

  components: {
    Swiper,
    Book
  },
  data() {
    return {
      pc: false,
      zupuList: [],
      books: [
        {
          bookshelfF: [
            {
              id: 0,
              url: 'https://sdcuihe.com/zupuImg/1.png',
              link: ''
            },
            {
              id: 1,
              url: 'https://sdcuihe.com/zupuImg/2.png',
              link: ''
            },
            {
              id: 2,
              url: 'https://sdcuihe.com/zupuImg/3.png',
              link: ''
            },
            {
              id: 3,
              url: 'https://sdcuihe.com/zupuImg/4.png',
              link: ''
            },
            {
              id: 4,
              url: 'https://sdcuihe.com/zupuImg/5.png',
              link: ''
            },
            {
              id: 5,
              url: 'https://sdcuihe.com/zupuImg/6.png',
              link: ''
            },
            {
              id: 6,
              url: 'https://sdcuihe.com/zupuImg/7.png',
              link: ''
            },
            {
              id: 7,
              url: 'https://sdcuihe.com/zupuImg/8.png',
              link: ''
            },
            
          ]
        },
        {
          bookshelfF: [
            
            {
              id: 8,
              url: 'https://sdcuihe.com/zupuImg/9.png',
              link: ''
            },
            {
              id: 9,
              url: 'https://sdcuihe.com/zupuImg/10.png',
              link: ''
            },
            {
              id: 10,
              url: 'https://sdcuihe.com/zupuImg/11.png',
              link: ''
            },
            {
              id: 11,
              url: 'https://sdcuihe.com/zupuImg/12.png',
              link: ''
            },{
              id: 0,
              url: 'https://sdcuihe.com/zupuImg/1.png',
              link: ''
            },
            {
              id: 1,
              url: 'https://sdcuihe.com/zupuImg/2.png',
              link: ''
            },
            {
              id: 2,
              url: 'https://sdcuihe.com/zupuImg/3.png',
              link: ''
            }
          ]
        },
        {
          bookshelfF: [
            {
              id: 3,
              url: 'https://sdcuihe.com/zupuImg/4.png',
              link: ''
            },
            {
              id: 4,
              url: 'https://sdcuihe.com/zupuImg/5.png',
              link: ''
            },
            {
              id: 5,
              url: 'https://sdcuihe.com/zupuImg/6.png',
              link: ''
            },
            {
              id: 6,
              url: 'https://sdcuihe.com/zupuImg/7.png',
              link: ''
            },
            {
              id: 7,
              url: 'https://sdcuihe.com/zupuImg/8.png',
              link: ''
            },
              {id: 8,
              url: 'https://sdcuihe.com/zupuImg/9.png',
              link: ''
            },
            {
              id: 9,
              url: 'https://sdcuihe.com/zupuImg/10.png',
              link: ''
            },
            {
              id: 10,
              url: 'https://sdcuihe.com/zupuImg/11.png',
              link: ''
            },
            {
              id: 11,
              url: 'https://sdcuihe.com/zupuImg/12.png',
              link: ''
            }
          ]
        }
      ],
      booksList: [
        { id: 0, name: '', url:'https://sdcuihe.com/zupuImg/one.png' },
        { id: 1, name: '', url:'https://sdcuihe.com/zupuImg/two.png' },
        { id: 2, name: '', url:'https://sdcuihe.com/zupuImg/three.png' },
        { id: 3, name: '', url:'https://sdcuihe.com/zupuImg/four.png' }
      ],
      bookCurrent: 0,
      books2: [
        {
          bookshelfF: [
            {
              id: 0,
              url: 'https://sdcuihe.com/zupuImg/1.png',
              link: ''
            },
            {
              id: 1,
              url: 'https://sdcuihe.com/zupuImg/2.png',
              link: ''
            },
            {
              id: 2,
              url: 'https://sdcuihe.com/zupuImg/3.png',
              link: ''
            },
            {
              id: 3,
              url: 'https://sdcuihe.com/zupuImg/4.png',
              link: ''
            },
            {
              id: 4,
              url: 'https://sdcuihe.com/zupuImg/5.png',
              link: ''
            }
          ]
        }
      ]
    }
  },
  methods: {
    handclick(index) {
      this.bookCurrent = index
      if (index == 1) {
        this.zupuList = this.books2
      } else {
        this.zupuList = this.books
      }
      // console.log(loading)
    }
  },
  created() {
    this.zupuList = this.books
    if (
      /Android|webOS| iPhone | iPad | iPod |BlackBerry|opera mini|opera mobile|appleWebkit.*mobile|mobile/i.test(
        navigator.userAgent
      )
    ) {
      this.pc = false
    } else {
      this.pc = true
    }
  }
}
</script>

<style lang="less">
.bookshelf {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 30px 0 30px;
}
.el-carousel {
  width: 100%;
}
.el-carousel__item {
  width: 100px;
  height: 100%;
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.swiperBox {
  width: 100%;
  height: auto;
  box-sizing: border-box;
}
.shujia01 {
  width: 100%;
  height: 36px;
  position: relative;
  top: -12px;
  z-index: 1;
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.boxList {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;
  margin-top: 53px;
  z-index: 3;
  position: relative;
  padding-left: 74px;
}
@media screen and (max-width: 768px) {
  .bookshelf {
    width: 100%;
    margin: 0 auto;
    height: 100%;
    padding: 30px 0 100px 0;
    box-sizing: border-box;
  }
  .swiperBox {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 0 15px;
  }
  .boxList {
    width: 100%;
    height: auto;
    padding-left: 0;
    padding-right: 0;
  }
  .mobile {
    position: fixed;
    left: 50%;
    bottom: 30px;
    z-index: 10;
    transform: translateX(-50%);
  }
  .shujiaMobile {
    width: 100%;
    height: 36px;
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 9;
    transform: translateX(-50%);
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
